<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>uiRouter路由控制器使用方式详解</title>
		<script src="../org/angular.min.js"></script>
		<script src="../org/jquery.min.js" ></script>
		<script src="../org/angular-ui-router.js" ></script>
	</head>
	<body>
		<div ng-app="hd" ng-controller="ctrl">
			<a href="" ui-sref='firstPage'>首页</a>    <!--或使用这种方式ui-sref='firstPage'实现路由跳转-->
			<a href="#/list">列表页</a>    <!--或使用这种方式ui-sref='lists'--> 
				
			<!--href="#/list"为什么实现不了-->
			<div ui-view>访问页面不存在</div>
		</div>
		<script>
			var m = angular.module('hd',['ui.router']);
			m.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){
				//默认路由
				$urlRouterProvider.otherwise('');
				//定义路由规则
				$stateProvider.state('defult',{
					url:'',
					template:'<h1>renren</h1>'
				})
//				$stateProvider.state('firstPage',{
//					url:'/first',
//					templateUrl:'../link/home.html',
//					controller:['$scope',function($scope){
//						$scope.data = '人人';
//					}]
//				})
                $stateProvider.state('firstPage',{
					url:'/first',
					templateUrl:'../link/home.html',
					controller:'ctrl'
					
				})
				$stateProvider.state('lists',{
					url:'/list',
					template:'<h1>列表页</h1>'
				})
			}])
			m.controller('ctrl',['$scope',function($scope){
                $scope.data = '人人控制';
                $scope.name = [
                {title:'renren'},
                {title:'rererere'}];
			}]);
		</script>
	</body>
</html>

